import { Component, createRef } from "react"
class Son extends Component {
  test = () => {
    console.log(this)
    console.log(1)
  }
  render () {
    return (
      <div>
        <h2>子组件</h2>
      </div>
    )
  }
}
class App extends Component {
  /**
   * 类似于vue中的ref
   * 1.可以获取html元素的dom对象
   * 2.可以获取组件的实例
   * 使用步骤:
   * 1.导入createRef方法并创建一个ref对象
   *  
   * 
   */
  h1 = createRef()
  son = createRef()
  getH1 = () => {
    console.log(this.h1)
    this.h1.current.style.color = "red"
    this.h1.current.innerText = 'hello'
    // this.h1.current.offsetTop = 33
  }
  getSon = () => {
    console.log(this.son)
    this.son.current.test()
  }
  render () {
    return (
      <div>
        <h1 ref={this.h1}>非受控组件</h1>
        <p><button onClick={this.getH1}>获取h1</button></p>
        <p><button onClick={this.getSon}>获取son</button></p>
        <Son ref={this.son}></Son>
      </div>
    )
  }
}
export default App